<template>
  <div>
<h1>用户借款列表</h1>
借款名称:<input type="text" v-model="state.BName">
利息：
<select v-model="state.INId">
  <option value="">请选择</option>
  <option :value="item.INId" v-for="item in lists">{{item.INName}}%</option>
</select>
<input type="button" value="查询" @click="show">
<table class="table table-bordered">
  <tr>
    <td>借款id</td>
    <td>借款名称</td>
    <td>借款金额</td>
    <td>借款利息</td>
    <td>时间</td>
    <td>操作</td>
  </tr>
  <tr v-for="item in list">
    <td>{{item.Bid}}</td>
    <td>{{item.BName}}</td>
    <td>{{item.BZuiGao}}</td>
    <td>{{item.INName}}%</td>
    <td>{{moment(item.BDate).format("YYYY-MM-DD")}}</td>
    <td>  
      <input type="button" value="借款" @click="jie(item.Bid)">
    </td>
  </tr>
</table>
共<span>{{pcount}}</span>页
共<span>{{count}}</span>条
每页<span>{{state.pageSize}}</span>条
当前<span>{{state.pageIndex}}</span>/<span>{{pcount}}</span>页
<input type="button" value="首页" @click="page(1)">
<input type="button" value="上一页" @click="page(state.pageIndex-1)">
<input type="button" value="下一页" @click="page(state.pageIndex+1)">
<input type="button" value="尾页" @click="page(pcount)">
  </div>
</template>

<script setup lang="ts">
import {reactive,toRefs,onMounted} from  'vue'
import axios from 'axios'
import { useRoute,useRouter } from 'vue-router';
import moment from 'moment';
const router=useRouter()
const route=useRoute()

let data:any=reactive({
  state:{
    BName:'',
    INId:'',
    pageIndex:1,
    pageSize:2,
  },
   list:[],
   count:0,
   pcount:0,
   lists:[]
})

let {state,list,count,pcount,lists}=toRefs(data)

const jie=(Bid:any)=>{
  router.push({
    path:'/jiekuan',
    query:{
      Bid:Bid
    }
  })
}

const page=(y:any)=>{
  if(y>=1 && y<=pcount.value){
    state.value.pageIndex=y
  }
  show()
}

onMounted(()=>{
  show();
  getData()
})

const getData=()=>{
axios({
  url:'/api/Users/XiaLa',
  method:'get',
  params:state.value
})
.then(res=>{
  console.log(res);
  
  lists.value=res.data.data
})
.catch(err=>{
console.log(err);

})
}

const show=()=>{
  axios({
    url:'/api/Users/GetBorrowList',
    method:'get',
    params:state.value
  })
  .then(res=>{
    console.log(res);
    list.value=res.data.data.plist;
    count.value=res.data.data.count;
    pcount.value=res.data.data.pcount;

  })
  .catch(err=>{
    console.log(err);
    
  })

}
</script>

<style scoped>

</style>